﻿@using Model.WXshopBuiness.Enum
@using Model.WXshopBuiness
@using Xproject.Util
@using Model.WXshopBuiness
@{

    Layout = "~/Views/Shared/_JSWeiXinPay.cshtml";
    List<string> Images = (List<string>)ViewData["ScrollImages"];
    List<ProductContents> contents = (List<ProductContents>)ViewData["contents"];
    List<ProductComments> comments = (List<ProductComments>)ViewData["comments"];
    List<WeiXinProductAttrShowModel> productAttrs = (List<WeiXinProductAttrShowModel>)ViewData["productAttrs"];
    Dictionary<int, string> CateGroup = (Dictionary<int, string>)ViewData["CateGroup"];
    List<ProductSpecification> specifications = (List<ProductSpecification>)ViewData["ProductSpec"];
    string Domain = CommonHelper.GetAppSettings("Domin");
    int adscount = 1;
    int videocount = 0;
    adscount = Images.Count;
    bool hasvideo = ViewBag.hasvideo;
    if (hasvideo) { videocount++; }
    bool isFoucs = (bool)ViewBag.IsFoucs;
}
@model WXProduct

<title>@Model.ProductName</title>

<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/css/shop/home.css" rel="stylesheet" />
<script src="~/Content/layerui/layer.js"></script>
<link href="http://at.alicdn.com/t/font_dlhgabo730hk6gvi.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/Content/css/shop/font-awesome.min.css">
<link rel="stylesheet" href="~/Content/css/shop/item.css">

<style>
    .active {
        border-color: #956bff;
        background-color: lightgreen;
    }

    .div_rightnum {
        bottom: 10px;
        right: 4%;
        border: solid 1px #e6e6e6;
        border-radius: 4px;
        width: 82px;
        overflow: hidden;
        text-align: center;
        line-height: 20px;
    }

        .div_rightnum i {
            float: left;
            width: 33%;
            color: #333;
            font-style: normal;
        }

        .div_rightnum span {
            float: left;
            width: 33%;
            border-left: solid 1px #e6e6e6;
            border-right: solid 1px #e6e6e6;
            color: #333;
        }

    .spec-head-img {
        float: left;
        width: 76px;
        height: 76px;
        overflow: hidden;
        margin-left: 0.625rem;
    }

    .theme-bgcolor {
        background: #956bff !important;
    }

    .item img {
        width: 100%;
        height: 250px;
    }

    .carousel-inner > .item > a > img {
        display: block;
        max-width: 100%;
        line-height: 1;
    }

    .xiang p {
        font-size: 1.5rem;
        font-weight: bolder;
        line-height: 30px;
    }

    .lun {
        background: #fff;
        margin-top: 1.143em;
        margin-bottom: 1em;
    }

        .lun label {
            font-size: 2.0rem;
        }

        .lun ul, .lun li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .lun li {
            border-bottom: 1px solid #ececec;
            margin-top: 1em;
            padding-bottom: 1em;
        }

    .smallfont {
        font-size: 1.3rem;
    }

    .touxi {
        overflow: hidden;
        margin-bottom: 8px;
    }

        .touxi img {
            display: block;
            float: left;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-left: 0.857em;
        }

    .attrparam {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        width: 100%;
        border-collapse: collapse;
    }

        .attrparam td, .attrparam th {
            font-size: 1.25em;
            border: 1px solid #d2d8c1;
            padding: 3px 7px 2px 7px;
            width: 50%;
        }

        .attrparam th {
            font-size: 1.1em;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #A7C942;
            color: #ffffff;
        }

        .attrparam tr.alt td {
            color: #000000;
            background-color: #EAF2D3;
        }

    .aui-footer-product-action-list {
        float: left;
        height: 100%;
        overflow: hidden;
        width: 52.5%;
    }

        .aui-footer-product-action-list a {
            display: inline-block;
            height: 100%;
            line-height: 50px;
            float: left;
            overflow: hidden;
            position: relative;
            color: #fff;
            font-size: 15px;
            width: 50%;
        }

    #myShopCarListCount {
        position: absolute;
        right: 6.3rem;
        top: 4px;
        display: block;
        width: 1.27em;
        height: 1.27em;
        font-size: 0.429em;
        color: #fff;
        text-align: center;
        background: #fe6e12;
        line-height: 1.67em;
        border-radius: 50%;
        font-style: normal;
    }

    .yellow-color {
        background-color: blue;
    }

    .red-color {
        background-color: #ee5d71;
    }

    .aui-footer-product-fixed {
        display: table;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 5;
        text-align: center;
        width: 100%;
        height: 50px;
        overflow: hidden;
        background: #fff;
    }

    .aui-footer-product-concern-cart {
        background-color: rgba(255, 255, 255, 1);
        position: relative;
        float: left;
        height: 100%;
        overflow: hidden;
        width: 47.5%;
    }

        .aui-footer-product-concern-cart a {
            display: inline-block;
            height: 100%;
            float: left;
            overflow: hidden;
            position: relative;
            color: #d4d4d4;
            font-size: 10px;
            width: 33.33%;
        }

    .float-bg {
        width: 100%;
        height: 50%;
        background-color: #fff;
        opacity: .9;
        filter: alpha(opacity=1);
        position: fixed;
        left: 0;
        top: 50%;
        z-index: 1100;
    }

        .float-bg img {
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
</style>

<script type="text/javascript">
    shareCustomerData = {
        title: "@(@Model.ProductName)",
    link: window.location.href + "&zxpID=" + "@(ViewBag.zxUserId)", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '@(Model.Domain + Model.ThumbnailUrl1)', // 分享图标
    desc: '@(Model.ShortDesc)'
}


</script>
@if (!isFoucs)
{
    <div class="float-bg" id="float-bg">
        <p style="font-size:1.8rem;color:blue;">您还没有关注我们</p>
        <p style="font-size:1.8rem;color:blue;">识别下面二维码关注康道优选，给您更多服务！</p>
        <img src="~/Content/Image/gzh.jpg" style="height:60%;width:60%" />
    </div>
}
<!--top-->
<div class="top_c">
    <a href="~/shop/index" class="iconfont icon-jiantou-copy-copy"></a>
    <p class="titi">详情</p>
</div>

<!--banner-->

<div id="carousel-example-generic" class="carousel slide banner" data-ride="@(hasvideo?"":"carousel")" style="margin-top:3em;">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        @for (int i = 0; i < adscount + videocount; i++)
        {
            string active = i == 0 ? "active" : "";
            <li data-target="#carousel-example-generic" data-slide-to="@i" class="@active"></li>
        }
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        @if (hasvideo)
        {
            <div class="item active">
                <video id="video" width="100%" height="248" controls>
                    <source src="@(Model.Domain+Model.VideoUrl)" type="@Model.VideoType">
                </video>
            </div>
        }
        @for (int i = 0; i < adscount; i++)
        {
            string active = ((!hasvideo && i == 0) ? "active" : "");
            <div class="item @active">
                <img class="img-responsive big zoom" style="height:250px;width:99.5%" src="@Images[i]">
            </div>
        }
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<!--tou-->
<div class="sp_tit">
    <div class="container">
        <p style="margin-top:1px;">@Model.ProductName</p>
        <span class="gui">@Model.Spec1</span>
        <span class="gui">@Model.Spec2</span>
        <span class="gui">@Model.Spec3</span>
        <span class="gui"></span>
        <span class="ge" style="float:left;width: 100%;margin: 0 0;">
            ￥<em>@Model.SalePrice.ToString("#0.00")</em>
            @if (!string.IsNullOrEmpty(Model.PromotionId))
            {
                <a onclick="addKanJia('@Model.ProductID')" style="float:right"><img style="width: 16rem;height: 4rem;" src="~/Content/Image/Promotions/KanJia/kanjia.png" /></a>
            }
        </span>
    </div>
</div>


<div class="tabs-container">
    @if (ViewBag.HasSpeci)
    {
        <div class="item-choose weui-cells mt-625">
            <div id="item_spec" class="weui-popup__container popup-bottom">
                <div class="weui-popup__overlay"></div>
                <div class="weui-popup__modal" style="background-color: white;top:50%">
                    <div class="item-spec-layer white-bgcolor">
                        <div class="spec-head clearfix">
                            <div class="spec-head-img"><img src="@(Model.Domain+Model.ThumbnailUrl1)" alt=""></div>
                            <strong class="spec-head-prince theme-color" id="ProductSpecPrice" style="color:red">￥@(Model.SalePriceStr)</strong>
                            <p class="spec-head-intro">
                                <div style="display:inline-block;width:33%;" class="div_rightnum">
                                    <i onclick="reorplus(this,-1)">-</i>
                                    <span class="zi" id="shopNum">1</span>
                                    <i onclick="reorplus(this,1)"> +</i>
                                </div>
                            </p>
                        </div>

                        <div class="spec-info clearfix">
                            <div class="spec-info-hd">规格</div>
                            <div class="spec-info-bd">
                                <ul class="specifacionUL">
                                    @foreach (ProductSpecification ps in specifications)
                                    {
                                        <li onclick="SpeciOnclick(this,'@ps.ProductSpecificationId','@(ps.StrSalesPrice)');">@ps.SpecificationName</li>
                                    }
                                </ul>
                            </div>
                        </div>

                        <button class="item-layer-button theme-bgcolor white-color " onclick="addToShopCar('@Model.ProductID',@Model.SalePrice.ToString(" #0.00"))" type="submit">确定</button>
                        <a href="javascript:;" class="close-popup spec-close"><i class="fa fa-close"></i></a>
                    </div>
                </div>
            </div>
        </div>
    }
    <ul class="nav nav-tabs">
        <li class="active" style="width:33%">
            <a data-toggle="tab" href="#tab-1" aria-expanded="true" class="smallfont"> 商品详情</a>
        </li>
        <li class="" style="width:33%">
            <a data-toggle="tab" href="#tab-2" aria-expanded="true" class="smallfont"> 规格参数</a>
        </li>
        <li class="" style="width:33%">
            <a data-toggle="tab" href="#tab-3" aria-expanded="false" class="smallfont">商品评论</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="tab-1" class="tab-pane active">
            <div class="xiang">
                <div class="container">
                    @foreach (ProductContents pc in contents)
    {
                <div class="row">
                    <div class="col-lg-12">
                        <img src="@(pc.Domain +pc.ProductImage)" class="zoom" style="margin-top:0rem;width:99.5%;">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <p>@pc.ProductContent</p>
                    </div>
                </div>
}
                </div>
            </div>
        </div>

        <div id="tab-2" class="tab-pane">
            <div class="xiang">
                <div class="lun">
                    @foreach (int a in CateGroup.Keys)
                    {
                        List<WeiXinProductAttrShowModel>
                        temp = productAttrs.Where(i => i.AttrGroupId == a).ToList();
                        <label>@CateGroup[a]</label>
                        <table class="attrparam">
                            @foreach (WeiXinProductAttrShowModel t in temp)
                            {
                                <tr>
                                    <td>@t.AttrName</td>
                                    @if (t.IsInput == 1)
                                    {
                                        <td>@t.Inputvalue </td>
                                    }
                                    else
                                    {
                                        <td>@t.AttrValue </td>
                                    }
                                </tr>
                            }
                        </table>
                    }

                </div>
            </div>
        </div>
        <div id="tab-3" class="tab-pane">
            <div class="xiang">
                <div class="lun">
                    <ul>

                        @if (comments != null && comments.Count > 0)
                        {
                            foreach (ProductComments comment in comments)
                            {
                                <li>
                                    <div class="touxi">
                                        <div class="time" style="float:left;height: 80px;width: 80px;">
                                            <span style="display:block;height:40px;"><img src="@(comment.Domain+comment.UserImgUrl)"></span>
                                            <span style="display:block;margin-left:0.875rem">@comment.UserName</span>
                                            <span>@comment.StrCreateTime</span>
                                        </div>
                                        <div class=" ">
                                            <span class="fu">服务评价 @comment.CommentServiceStarts</span>
                                            <div class="xing">
                                                @for (int i = 0; i < comment.CommentServiceStarts; i++)
                                                {
                                                    <span class="glyphicon glyphicon-star"></span>
                                                }
                                            </div>
                                        </div>
                                        <div class=" ">
                                            <span class="fu">包装评价 @comment.CommentPackageStarts</span>
                                            <div class="xing">
                                                @for (int i = 0; i < comment.CommentPackageStarts; i++)
                                                {
                                                    <span class="glyphicon glyphicon-star"></span>
                                                }
                                            </div>
                                        </div>
                                        <div class=" ">
                                            <span class="fu">物流评价 @comment.CommentLogisticStarts</span>
                                            <div class="xing">
                                                @for (int i = 0; i < comment.CommentLogisticStarts; i++)
                                                {
                                                    <span class="glyphicon glyphicon-star"></span>
                                                }
                                            </div>
                                        </div>
                                    </div>
                                    <span class="nei">@comment.Comment</span>
                                </li>
                            }
                        }
                        else
                        {
                            <li>评论空空如也，赶紧来当第一个评论此宝贝的人吧^_^</li>
                        }

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!--footer-->
<div class="aui-footer-product-fixed">
    <div class="aui-footer-product-concern-cart">
        @if (!isFoucs)
        {
            <a href="#" onclick="AddFoucs();" style="width:100%">
                <span class="aui-f-p-focus-info" style="font-size:2rem;font-weight:bolder;color:blue">+关注康道优选</span>
            </a>
        }
        else
        {
            <a href="~/Shop/ShopCar?type=@((int)Enum_OrderState.SHOPCAR)" style="width:65%">

                <span style="color:red;display:inline-block;margin-top: 1.2rem;font-size: 1.4rem;">￥<span id="myshopCarTotalToPay">@ViewBag.usermodel.orderinfo.ShopCarNeedToPayTotal.ToString("#0.00")</span></span>
                <span class="iconfont icon-iconfontgouwuche" style="display: inline-block;float: left;font-size: 3.2rem;">
                    <i id="myShopCarListCount">@ViewBag.usermodel.orderinfo.ShopCarNeedToPayCount</i>
                </span>
            </a>
            <a href="#" onclick="showKf();">
                <span class="glyphicon glyphicon-headphones" style="font-size:2.6rem">
                    <i></i>
                </span>
                <span style="display:block">客服</span>
            </a>

        }
    </div>
    <div class="aui-footer-product-action-list">
        <a href="#" onclick="addProductToMyCollection('@Model.ProductID')" style="width:20%;color:orangered;line-height:9px;">
            <span class="glyphicon glyphicon-heart" style="font-size:3rem"><i></i></span>
            <span>收藏</span>
        </a>
        @if (ViewBag.HasSpeci)
        {
            <a class="open-popup yellow-color" href="javascript:;" data-target="#item_spec">加入购物车</a>
        }
        else
        {
            <a class="yellow-color" href="javascript:;" onclick="addToShopCar('@Model.ProductID',@Model.SalePrice.ToString(" #0.00"))">加入购物车</a>
        }
        <a href="~/Shop/ShopCar?type=@((int)Enum_OrderState.SHOPCAR)" class="red-color" style="width:30%">结算</a>
    </div>
</div>

<input type="hidden" id="ProductSpecifactionId" value="" />
<input type="hidden" id="ProductNum" value="1" />
<div id=""></div>
<script src="~/Scripts/shop/jquery.min.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/shop/index.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script src="~/Scripts/shop/zoomerang.js"></script>
<script type="text/javascript">
    function addToShopCar(productId, ordermoney) {
        layer.open({ type: 2, shadeClose: false });
        var num =$("#ProductNum").val();
        var specifationid =  $("#ProductSpecifactionId").val();
        $.ajax({
            type: "POST",
            url: '@(Domain)/Order/AddToShoppingCartNew',
            data: { productId: productId, Nums: num, specifationId: specifationid },
    cache: false,

    success: function (data) {
        layer.open({
            content: data.Data
            , skin: 'msg'
            , time: 1 //2秒后自动关闭
            , end: function () {
                layer.closeAll('dialog');
            }
        });
        $("#myshopCarTotalToPay").text(data.toPay);
        $("#myShopCarListCount").text(data.totallist);
    }
});
}

    function addProductToMyCollection(productId) {
        layer.open({ type: 2, shadeClose: false });
$.ajax({
    type: "POST",
    url: '@(Domain)/Shop/AddProductToMyCollection',
    data: { productId: productId },
    cache: false,
    success: function (data) {
        layer.open({
            content: data.Data
            , skin: 'msg'
            , time: 1 //2秒后自动关闭
            , end: function () {
                layer.closeAll('dialog');
            }
        });
    }
});
}

    function addKanJia(productId) {
        layer.open({ type: 2, shadeClose: false });
$.ajax({
    type: "POST",
    url: '@(Domain)/Promotions/AddProductKanJia',
    data: { productId: productId },
    cache: false,
    success: function (data) {

        layer.open({
            content: data.Data
            , skin: 'msg'
            , time: 2 //2秒后自动关闭
            , end: function () {
                layer.closeAll('dialog');
            }
        });
        if (data.Success == true) {
            window.location.href = "@(Domain + "/Promotions/KJPromotions?KanJiaID=")" + data.KanJiaId;
}
}
});
}

function showKf() {
layer.open({
content: '请直接在与公众号对话，小二在后台为您服务'
, skin: 'footer'
});

}
function AddFoucs() {
$("#float-bg").show();
}

$(function () {
//使用方法名字执行方法 setTimeout只执行一次
var t1 = window.setTimeout(fadeDiv, 4000);
function fadeDiv() {
$("#float-bg").fadeOut();
window.clearTimeout(t1);//去掉定时器
}
    });

function reorplus(obj, step) {
    var now = Number($("#shopNum").text());
    if (now == 1) {
        if (step == -1) {
            return;
        }
    }
    var after = now + step;
    $("#shopNum").text(after);

    var msg = "数量+1";
    if (step == -1) {
        msg = "数量-1";
    }
    layer.open({
        content: msg
        , skin: 'msg'
        , time: 2 //2秒后自动关闭
    });
    $("#ProductNum").val(after);
 }
    function SpeciOnclick(obj,ProductSpecificationId, price) {

        $(".specifacionUL li").removeClass("active");
        $(obj).addClass("active");
        $("#ProductSpecPrice").text("￥" + price);
        $("#ProductSpecifactionId").val(ProductSpecificationId);
    }
</script>

<script>
    Zoomerang
        .config({
            maxHeight: 600,
            maxWidth: 400,
            bgColor: '#000',
            bgOpacity: .85
        })
        .listen('.zoom')

</script>